<script setup>
import { onUnmounted } from 'vue'
import { useUserStore } from '@/store/userInfo'
import { privacyAgreement, vipServer } from '@/untils/ag.js'

const userStore = useUserStore()

// 菜单数据
const menuList = [
    { name: '会员服务协议', type: 'vipServer' },
    { name: '隐私授权协议', type: 'privacyAgreement' },
]

// 点击菜单项
const handleMenuItem = (type) => {
    let url = ''
    if (type === 'vipServer') {
        url = vipServer
    } else if (type === 'privacyAgreement') {
        url = privacyAgreement
    }

    uni.navigateTo({
        url: `/pages/webview/webview?url=${encodeURIComponent(url)}`
    })
}

// 声明定时器变量
let logoutTimer

// 退出登录
const handleLogout = () => {
    uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
            if (res.confirm) {
                // 清空用户信息
                userStore.setUserinfo({
                    uid: '',
                    mobile: '',
                    role: '',
                    username: ''
                })
                
                // 显示退出成功提示
                uni.showToast({
                    title: '退出成功',
                    icon: 'success',
                    mask: true
                })
                
                // 延迟跳转到首页
                logoutTimer = setTimeout(() => {
                    uni.switchTab({
                        url: '/pages/index/index'
                    })
                }, 800)
            }
        }
    })
}

// 在组件销毁时清理定时器
onUnmounted(() => {
    if (logoutTimer) {
        clearTimeout(logoutTimer)
        logoutTimer = null
    }
})
</script>

<template>
    <view class="user-options">
        <!-- 菜单列表 -->
        <view class="menu-list">
            <view class="menu-item" v-for="item in menuList" :key="item.type" @tap="handleMenuItem(item.type)">
                <text class="item-name">{{ item.name }}</text>
                <uni-icons custom-prefix="iconfont" type="yuan-a-ArrowRight2" color="#ced4da" :size="20" />
            </view>
        </view>

        <!-- 退出登录按钮 -->
        <view class="logout-btn" @tap="handleLogout">
            退出登录
        </view>
    </view>
</template>

<style lang="scss" scoped>
.user-options {
    min-height: 100vh;
    padding: 24rpx;
    background-color: $page-bg-color;

    // 菜单列表
    .menu-list {
        padding: 0 24rpx;
        background-color: #fff;
        border-radius: 16rpx;

        .menu-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 32rpx 0;
            border-bottom: 2rpx solid $line-color-aux;

            &:last-child {
                border-bottom: none;
            }

            .item-name {
                font-size: 28rpx;
                color: $text-font-color-2;
            }
        }
    }

    // 退出登录按钮
    .logout-btn {
        margin-top: 48rpx;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        background-color: $brand-ts-color;
        color: #fff;
        font-size: 32rpx;
        border-radius: 44rpx;

        &:active {
            opacity: 0.9;
        }
    }
}
</style>